<template>
	<view>
		<u-navbar :border-bottom="false" title="物流发货" :title-size="36" :title-bold="true" :title-color="textColor" :background="{background:'#F8F8F8'}">
		</u-navbar>
		<view class="u-p-l-35 u-p-r-35 u-m-t-20">
			<view class="u-p-30" style="background-color: #fff;border-radius: 5rpx;">
				<view class="u-m-b-40 u-font-30" style="font-weight: 500;">订单信息</view>
				<view class="u-flex u-col-center ">
					<view class="u-flex u-col-center u-row-center u-font-22" 
					style="width: 36rpx;height: 36rpx;background-color: #FFBB1A;color: #FFFFFF;border-radius: 10rpx;"
					>销</view>
					<view class="u-m-l-20">{{buyerName}}</view>
				</view>
				<view class="u-flex u-col-center u-m-t-20">
					
					<view class="u-flex u-col-center u-row-center u-font-22"
					style="width: 36rpx;height: 36rpx;background-color: #FF551A;color: #FFFFFF;border-radius: 10rpx;"
					>采</view>
					<view class="u-m-l-20">{{storeShop.name}}</view>
				</view>
				<view class="u-flex u-col-center u-m-t-40">
					<view class=" u-font-30" style="font-weight: 400;color: #666;">订单编号</view>
					<view class="u-m-l-20 u-font-30" style="font-weight: 500;color: #333;">{{tradeNo}}</view>
				</view>
			</view>
			
			<view class="u-p-30 u-m-t-20" style="background-color: #fff;border-radius: 5rpx;">
				<view class="u-m-b-40 u-font-30" style="font-weight: 500;">物流填单</view>
				
				<view class="u-m-b-20 u-font-28" style="color: #999;">上传物流单</view>
				<u-upload
				 ref="upLoadref"
				 :width="180"
				 :height="180"
				 :file-list="fileList"
				 :max-count="maxPayResource"
				 :deletable="delResource"
				 :show-progress	="false"
				 :action="baseUrl + 'api/Resource/UploadToOss'"
				 :header="headerToken" 
				 :showTips="true"
				 :source-type="['album']"
				 @on-success="onSuccess"
				 @on-remove="onRemove"
				></u-upload>
				<view class="u-m-b-10 u-m-t-30 u-font-28" style="color: #999;">物流单号</view>
				<view class="u-p-r-60" style="border-bottom: 1px solid #eaeaea;position: relative;">
					<u-input v-model="LogisticsNo" :type="'text'" placeholder="请输入物流单号" :border="false" clearable />
					<image src="/static/order/scanLong.png" mode="" @click="sacnLogNoFn" style="width: 36rpx;height: 36rpx;position: absolute;right: 0;bottom: 20rpx;"></image>
				</view>
				<view class="u-flex u-col-center u-m-b-20   u-m-t-30 u-row-between">
					<view class="u-font-28" style="color: #999;">物流公司</view>
					<view class="u-flex">
						<view :class="['choose-input',{'choose-input-active':chooseInputType == 0}]" @click="chooseSelectFn" style="margin-right: 30rpx;">
							选择
						</view>
						<view :class="['choose-input',{'choose-input-active':chooseInputType == 1}]"  @click="chooseInputFn" style="">
							输入
						</view>
					</view>
				</view>
				<view class="u-flex" v-if="chooseInputType === 0">
					<u-input v-model="selectLogistics" type="select" @click="componyShow = true" placeholder="选择物流公司" style="border-bottom: 1px solid #eaeaea;margin-right: 40rpx;padding-right:20rpx;"/>
					<u-input v-model="selectLogPhone" type="select"  @click="componyShow = true" placeholder="选择物流电话" style="border-bottom: 1px solid #eaeaea;padding-right:20rpx;"/>
				</view>
				<view class="u-flex" v-else>
					<u-input v-model="inputLogistics" type="text" placeholder="输入物流公司" style="border-bottom: 1px solid #eaeaea;margin-right: 40rpx;padding-right:20rpx;"/>
					<u-input v-model="inputLogPhone" type="text" placeholder="输入物流电话" style="border-bottom: 1px solid #eaeaea;padding-right:20rpx;"/>
				</view>
				<view class="u-m-b-20 u-font-28  u-m-t-30" style="color: #999;">物流备注</view>
				<u-input v-model="LogisticsRemarks" type="textarea" placeholder="请输入物流备注" />
				
			</view>
			<view style="box-sizing: border-box;padding: 98rpx 0;">
				<button @click="submitFn" style="height: 90rpx;
				background: linear-gradient(-90deg, #FFBB1A, #FFBB1A);
				border-radius: 45px;
				border: none;">确定</button>
			</view>
			
			
		</view>
		<!-- 删除物流公司模态窗 -->
		<u-modal v-model="delComponyModel" z-index="3" :content="content" @confirm="delCompaniesFn()"></u-modal>
		<!-- 选择物流公司 -->
		<u-popup v-model="componyShow" mode="bottom" z-index="1" >
			<view class="u-p-35">
				<view class="u-text-center u-m-b-30" style="font-weight: 500;font-size: 40rpx;">
					选择物流公司
				</view>
				<scroll-view scroll-y="true" style="height: 500rpx;border: 1px solid #EEEEEE;" v-if="componyList!=0">
					<view class="compony-list">
						<view class="compony-item u-flex u-col-center u-row-between u-p-l-30 u-p-r-30" v-for="item in componyList" :key="item.id">
							<view class="u-flex">
								<view class="u-line-1" style="width: 260rpx;">{{item.name}} </view>
								   {{item.phoneNumber}}
							</view>
							<view class="u-flex">
								<button type="danger" style="width:50rpx; height: 60rpx;line-height: 60rpx;padding: 0;margin: 0;margin-right: 20rpx;" @click="chooseComponyFn(item)">
									<u-icon name="checkmark" color="#666" size="32"></u-icon>
								</button>
								<button @click="delComponyClickFn(item.id)" type="danger" style="width:50rpx; height: 60rpx;line-height: 60rpx;background-color: #FF0000; color: #fff;padding: 0;margin: 0;">
									<u-icon name="trash-fill" color="#fff" size="32"></u-icon>
								</button>
							</view>
							
						</view>
					</view>
				</scroll-view>
				
				<u-empty text="没有可以选择的物流公司" mode="list" v-else></u-empty>
				
				<u-button type="default" @click="componyShow = false" style="margin-top: 30rpx;">取消</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				content:'您确定要删除该物流公司？',
				delComponyModel:false,
				delComponyId:'',
				buyerName:"",
				tradeNo:"",
				fileList: [],
				resourceList:[],
				maxPayResource:6,
				delResource:false,
		
				LogisticsNo:'',
				chooseInputType:0,
				selectLogistics:'',
				selectLogPhone:'',
				inputLogistics:'',
				inputLogPhone:'',
				componyList:[
					
				],
				componyShow:false,
				logisticalCompanyId:'',
				LogisticsRemarks:'',
				orderId:'',
			}
		},
		onShow() {
			this.getCompaniesFn();
		},
		onLoad(options) {
			this.buyerName = options.buyerName;
			this.tradeNo = options.tradeNo;
			this.orderId = options.orderId;
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'}),
			...mapState(useUserStore, {
				headerToken(store){
				return {
					Authorization: 'Bearer ' + store.user.access_token,
				}
			}})
		},
		methods: {
			// 点击物流公司列表的删除按钮
			delComponyClickFn(id){
				this.delComponyId = id;
				this.delComponyModel = true;
			},
			// 选中物流公司
			chooseComponyFn(item){
				this.selectLogistics = item.name;
				this.selectLogPhone = item.phoneNumber;
				this.logisticalCompanyId = item.id;
				this.componyShow = false;
			},
			// 选择物流公司和电话
			chooseSelectFn(){
				if(this.componyList.length !== 0){
					this.chooseInputType = 0;
				}else{
					this.$u.toast('没有可选择的物流公司，请手动输入')
				}
			},
			// 选择输入物流公司和电话
			chooseInputFn(){
				this.chooseInputType = 1;
				this.selectLogistics = '';
				this.selectLogPhone = '';
				this.logisticalCompanyId = '';
			},
			// 扫码获取物流单号
			sacnLogNoFn(){
				// #ifdef H5
					this.$u.toast('H5端不支持此功能');
				// #endif
				// #ifdef APP-PLUS
					uni.scanCode({
						success: async (res) => {
							console.log(res.result);
							this.LogisticsNo = res.result;
						},
						error:(Error)=>{
							this.$u.toast('扫码失败，错误：'+Error);
						}
					});
				// #endif
			},
			// 物流发货提交
			async submitFn(){
				uni.showLoading({
					title:'loading...'
				});
				if(this.resourceList.length == 0){
					uni.hideLoading({title:'loading...'});
					this.$u.toast('物流单图片不得为空');
					return false;
				};
				if(this.LogisticsNo == ''){
					uni.hideLoading({title:'loading...'});
					this.$u.toast('物流单号不得为空');
					return false;
				};
				if(this.logisticalCompanyId == ''&&(this.inputLogistics == ''&&this.inputLogPhone == '')){
					uni.hideLoading({title:'loading...'});
					this.$u.toast('物流公司不得为空');
					return false;
				}
				
				let params = {
					id:this.orderId,
				  "logisticsNo": this.LogisticsNo,
				  "shopId": this.storeShop.id,
				  "resourceIds": this.resourceList,
				  "remarks": this.LogisticsRemarks
				}
				if(this.logisticalCompanyId !==''){
					params.logisticalCompanyId = this.logisticalCompanyId
				}else{
					params.logisticsCompany = this.inputLogistics
					params.phoneNumber = this.inputLogPhone
				}
				const res = await this.$newHttp.put('api/Trade/LogisticsDelivery',params);
				uni.hideLoading({title:'loading...'});
				if(res.code == 200){
					uni.navigateBack();
				}else{
					this.$u.toast('发货失败，错误信息：'+res.erroMessage);
				}
			},
			// 上传物流单成功
			async onSuccess(data) {
				this.resourceList.push(data.data[0].id);
			},
			// 删除物流单
			async onRemove(data) {
				this.resourceList.splice(data,1);
			},
			// 获取物流公司列表
			async getCompaniesFn(){
				const res = await this.$newHttp.get('api/Delivery/GetLogisticalCompanies');
				console.log(res);
				if(res.code === 200){
					this.componyList = res.data?res.data:[];
					if(res.data.length !== 0){
						this.chooseInputType = 0;
					}else{
						this.chooseInputType = 1;
					}
				}else{
					this.$u.toast('获取物流公司列表失败')
				}
			},
			// 删除物流公司
			async delCompaniesFn(){
				// Delivery/DeleteLogisticalCompany
				this.delComponyModel = false;
				uni.showLoading({
					title:"loading..."
				});
				const res = await this.$newHttp.delete('api/Delivery/DeleteLogisticalCompany?logisticalCompanyId='+this.delComponyId);
				uni.hideLoading();
				if(res.code == 200){
					if(this.logisticalCompanyId === this.delComponyId){
						this.logisticalCompanyId = '';
						this.selectLogPhone = '';
						this.selectLogistics ='';
					}
					this.delComponyId = '';
					this.getCompaniesFn();
				}else{
					this.$u.toast('删除失败，错误信息：'+res.erroMessage);
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.choose-input{
		border: 2px solid #999;
		color: #999;
		font-size: 12rpx; 
		padding: 2rpx 4rpx;
		border-radius: 8rpx;	
	}
	.choose-input-active{
		border: 2px solid #FF551A;
		color: #FF551A;
	}
	.compony-list{
		
		.compony-item{
			height: 100rpx;
			margin-bottom: 20rpx;
			border: 1px solid #eaeaea;
		}
	}
</style>
